<template>
  <div class="w-full h-full bg-gradient-to-br from-blue-50 to-gray-100">
    <!-- Header -->
    <header class="w-full h-14 fixed top-0 left-0 z-50 flex justify-center items-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-lg px-4">
      用户登录
    </header>

    <!-- Main Content -->
    <div class="mt-24 px-5 pt-10 max-w-sm mx-auto">
      <div class="bg-white rounded-xl shadow-xl p-6 space-y-6 transform transition-all hover:scale-[1.01] duration-300">
        <form @submit.prevent="handleLogin" class="space-y-6">
          <!-- 手机号 -->
          <div class="flex items-center border-b border-gray-300 pb-3">
            <svg class="h-5 w-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364A60.488 60.488 0 0012 15c2.208 0 4.363.155 6.455.457" />
            </svg>
            <input v-model="form.phone" type="text" placeholder="请输入手机号码"
                   class="w-full border-none focus:outline-none text-gray-800 placeholder-gray-400 focus:border-b-2 focus:border-blue-500 transition duration-200">
          </div>

          <!-- 密码 -->
          <div class="flex items-center border-b border-gray-300 pb-3">
            <svg class="h-5 w-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <input v-model="form.password" type="password" placeholder="请输入密码"
                   class="w-full border-none focus:outline-none text-gray-800 placeholder-gray-400 focus:border-b-2 focus:border-blue-500 transition duration-200">
          </div>

          <!-- 登录按钮 -->
          <button type="submit"
                  :disabled="loading"
                  class="w-full h-12 flex justify-center items-center text-white font-semibold bg-gradient-to-r from-green-500 to-teal-500 rounded-lg shadow-md hover:from-green-600 hover:to-teal-600 transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-green-300 disabled:opacity-70 disabled:cursor-not-allowed">
            <span v-if="!loading">登录</span>
            <span v-else class="flex items-center">
              <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              登录中...
            </span>
          </button>
        </form>

        <!-- 注册按钮 -->
        <button @click="$router.push('/register')"
                class="w-full h-12 mt-4 flex justify-center items-center text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-200 transition duration-300 focus:outline-none focus:ring-4 focus:ring-gray-300">
          去注册
        </button>
      </div>
    </div>

    <FooterMenu />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterMenu from '../../components/common/FooterMenu.vue'

const router = useRouter()
const form = ref({
  phone: '',
  password: ''
})
const loading = ref(false)

// 登录处理
const handleLogin = () => {
  if (!form.value.phone) {
    showToast('请输入手机号码')
    return
  }
  if (!form.value.password) {
    showToast('请输入密码')
    return
  }

  // 模拟登录请求
  loading.value = true
  setTimeout(() => {
    // 登录成功提示
    showToast('登录成功！') // 实际项目中可以使用更优雅的通知方式

    // 跳转到 "我的" 页面
    router.push('/mypage')

    loading.value = false
  }, 1000)
}

// 自定义 Toast 提示（可替换为你项目中的 toast 插件）
function showToast(message) {
  const toast = document.createElement('div')
  toast.textContent = message
  Object.assign(toast.style, {
    position: 'fixed',
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    background: '#333',
    color: '#fff',
    padding: '10px 20px',
    borderRadius: '8px',
    zIndex: '9999',
    opacity: '0',
    transition: 'opacity 0.3s ease',
  })

  document.body.appendChild(toast)
  requestAnimationFrame(() => {
    toast.style.opacity = '1'
  })

  setTimeout(() => {
    toast.style.opacity = '0'
    setTimeout(() => {
      document.body.removeChild(toast)
    }, 300)
  }, 2000)
}
</script>



